<style lang="scss" scoped>
    .mshop-order {
        padding-top: 46px;
        background-color: white;

        .address {
            $iconSize: 20px;
            display: flex;
            align-items: center;

            .icon {
                padding: .75em;
                .address {
                    display: block;
                    width: $iconSize;
                    height: $iconSize;
                    background: url('../../assets/address.svg') no-repeat;
                    background-size: $iconSize;
                }
            }

            .address-info {
                width: 100%;
                padding: .5em .75em .5em 0;
                line-height: 1.7;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info {
                    width: 100%;
                    .name {
                        display: flex;
                        justify-content: space-between;
                    }

                    .street {
                        word-break: break-all;
                        font-size: 14px;
                    }
                }

                .icon-right {
                    display: inline-block;
                    width: .6em;
                    height: .6em;
                    border: 2px solid #666;
                    border-width: 2px 0 0 2px;
                    transform: rotate(135deg);
                }
            }

            &:active {
                background-color: #ececec;
            }
        }

        .order {
            width: 100%;

            @mixin price {
                color: #F44336;

                &::before {
                    content: '￥';
                    position: relative;
                    top: 1.4px;
                }
            }

            .line {
                padding: .4em 0;
                display: flex;
                justify-content: space-between;
                width: 100%;

                align-items: center;
                width: 100%;
                background-color: #F4EFEF;
                font-size: 14px;

                &:not(:last-child) {
                    border-bottom: 2px solid white;
                }

                .left {
                    width: 80%; // 为了兼容微信space-bettwen显示bug，强制指定宽度
                    padding-left: .8em;
                    display: flex;
                    justify-content: flex-start;

                    .img {
                        border: 2px solid #ddd;
                        background-color: #fff;
                        border-radius: 4px;
                        height: 88px;
                        min-width: 88px;
                        max-width: 88px;
                        display: flex;
                        align-items: center;

                        img {
                            max-width: 100%;
                            max-height: 100%;
                        }
                    }

                    .info {
                        padding: 0 1em;
                        word-break: break-all;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        .variant {
                            color: #888;
                        }
                    }
                }

                .right {
                    padding-right: .8em;
                    height: 100%;

                    .number {
                        padding: 0 .5em;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 100%;

                        .price {
                            flex-basis: 2em;
                            @include price;
                        }

                        .quantity {
                            flex-basis: 2em;

                            &::before {
                                content: 'x';
                                padding-right: 2px;
                                position: relative;
                                bottom: 1px;
                            }
                        }
                    }
                }
            }
        }

        .footer-info {
            margin-top: 15px;
        }

        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 100%;

            background-color: white;

            > span {
                display: inline-block;
            }

            .button {
                text-align: center;
                line-height: 40px;
                padding: .2em 1em;
                margin-left: .4em;
                background-color: red;
                color: white;

                &:active {
                    background-color: #666;
                }
            }

            .price {
                color: red;

                &::before {
                    content: '￥';
                    position: relative;
                    top: 1.4px;
                }
            }
        }
    }
</style>

<template>
    <div class="mshop-order">
        <div class="address" v-link="{path: 'address', query: { id: address.id }, append: true}">
            <div class="icon">
                <i class="address"></i>
            </div>

            <div class="address-info">
                <div class="info">
                    <div class="name">
                        <span>收货人:{{ address.name }}</span>
                        <span>{{ address.phone }}</span>
                    </div>

                    <div class="street">
                        <span>收货地址:</span>
                        <span>{{ address.province && address.province.name }}</span>
                        <span>{{ address.city && address.city.name }}</span>
                        <span>{{ address.county && address.county.name }}</span>
                        <span>{{ address.street }}</span>
                    </div>
                </div>

                <i class="icon-right"></i>
            </div>

        </div>

        <div class="order">
            <div class="line" v-for="line in order_line">
                <div class="left">
                    <div class="img" >
                        <img :src="line.product_img" />
                    </div>

                    <div class="info">
                        <p class="title">{{ line.name }}</p>
                        <p class="variant">{{ line.variant }}</p>
                    </div>
                </div>

                <div class="right">
                    <div class="number">
                        <price :price="line.price_unit"></price>
                        <p class="quantity">{{ line.product_uom_qty }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-info">
            <group>
                <calendar
                    title="配送时间"
                    :start-date="start_date"
                    highlight-weekend
                    :value.sync="shipping_date"></calendar>
                <x-textarea
                    :max="200"
                    :value.sync="message"
                    placeholder="买家留言"
                    show-counter ></x-textarea>
            </group>
        </div>

        <footer>
            <span>共{{ amount_qty }}件，总金额<price :price='amount'></price></span>
            <span class="button" @click="do_submit">{{ submit_button }}</span>
        </footer>

        <toast :show.sync="show_toast" type="text">请先选择地址或新建地址</toast>
    </div>
</template>

<script>
    import orderService from 'services/order'
    import Price from 'util-components/price.vue'
    import Group from 'vux-components/group'
    import Cell from 'vux-components/cell'
    import XTextarea from 'vux-components/x-textarea'
    import Calendar from 'vux-components/calendar'
    import Toast from 'vux-components/toast'

    import getters from '../../vuex/getters'
    import ShopType from '../../shop-type'

    const temp_data = {
        order_line: [
            { product_img: '/static/4.jpeg', name: '守望先锋XXX', variant: '版本：普通', price_unit: 198, product_uom_qty: 12},
            { product_img: '/static/4.jpeg', name: '守望先锋XXX', variant: '版本：普通', price_unit: 198, product_uom_qty: 12}
        ],
        start_date: '2016-7-30',
    }

    export default {
        data: () => ({
            address: false,
            order_line: [],
            shipping_date: '',
            start_date: '',
            message: '',
            show_toast: false,
            submit_button: '提交订单',
        }),
        ready () {
            this.submit_button = ShopType.orderEdit.get_submit_button(this.shop_type);
        },
        components: {
            Group,
            Cell,
            XTextarea,
            Calendar,
            Toast,
            Price
        },
        vuex: {
            getters
        },
        methods: {
            do_submit () {
                if (!this.address || !this.address.id) {
                    this.show_toast = true;
                } else {
                    orderService.canPay(this.amount, this.shop_type.type).then(() => {
                        orderService
                            .create(
                                this.$route.query.orders,
                                this.$route.query.product,
                                this.address.id,
                                this.shipping_date,
                                this.message
                            )
                            .then(({data}) => {
                                const result = JSON.parse(data.result);
                                //如果有库存则跳转订单完成界面，否则提示报错ßßß
                                if (result.status != 500){
                                  this.$route.router.go({
                                      path: '/cart/order',
                                      query: { order_id: result.sale_id },
                                      replace: true
                                  });
                                }
                            })
                    })
                }
            }
        },
        computed: {
            amount_qty () {
                return this.order_line.reduce((sum, line) => sum += line.product_uom_qty, 0);
            },
            amount () {
                return this.order_line.reduce((sum, line) => sum += line.price_unit * line.product_uom_qty, 0);
            }
        },
        route: {
            data: ({to}) => {
                return Promise.all([
                    orderService.fetchTemp(to.query.orders, to.query.product)
                        .then(({data}) => data, () => temp_data),
                    orderService.getDefaultAddress()
                ]).then(([{order_line, start_date}, {data}]) => ({
                    order_line,
                    address: data,
                    start_date: start_date,
                    shipping_date: start_date
                }))
            }
        }
    }
</script>
